import React, { useRef, useState } from "react";
import style from "./bg.module.css";
import { imgcolor } from "../Picture/imgtu";

function Index() {
  const [selectedColor, setSelectedColor] = useState("#ffffff");
  const [colorValue, setColorValue] = useState(1);
  const blockRef = useRef(null);

  const handleColorClick = (e) => {
    const color = getComputedStyle(e.target).backgroundColor;
    setSelectedColor(color);
  };
  const handleSliderChange = (e) => {
    const value = e.target.value;
    setColorValue(value);
  };
  const adjustedColor = (color) => {
    const rgb = color.match(/\d+/g);
    if (rgb) {
      const adjustedRgb = rgb.map((c) => Math.round(c * colorValue));
      return `rgb(${adjustedRgb.join(",")})`;
    }
    return color;
  };

  return (
    <div>
      自定义背景
      <div className={style.sps}>
        <span className={style.first} style={{ background: selectedColor }}>
          <div
            className={style.block}
            style={{ backgroundColor: adjustedColor(selectedColor) }}
          >
            <div
              className={style.box}
              style={{
                background: `linear-gradient(to right,${selectedColor},#fff)`,
              }}
            ></div>
            <div className={style.inp}>
              <input
                type="color"
                value={selectedColor}
                onChange={(e) => setSelectedColor(e.target.value)}
              />
            </div>
          </div>
        </span>
        <span className={style.bg}></span>
        {[
          "#000",
          "#666666",
          "#a8a8a8",
          "#d9d9d9",
          "#ffffff",
          "#ff5b5c",
          "#ffbd4a",
          "#fef951",
          "#99e265",
          "#2fb4ff",
          "#5272ff",
          "#b760e6",
          "#ffced2",
          "#ffe9c0",
          "#fbf1d6",
          "#d0edd9",
          "#deefff",
          "#c1ebfd",
          "#e6d2f7",
        ].map((colorCode, index) => (
          <span
            key={index}
            style={{ background: colorCode }}
            onClick={handleColorClick}
          ></span>
        ))}
      </div>
      {imgcolor.map((category) => (
        <div key={category.id} className={style.back}>
          <p>{category.title}</p>
          {category.children.img.map((img, index) => (
            <img
              key={index}
              src={img}
              alt={`${category.title} image ${index + 1}`}
              className={style.image}
            />
          ))}
        </div>
      ))}
    </div>
  );
}

export default Index;
